<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!--记住:vue中只要出现触发函数(@click="函数")就必须在函数区定义，否则就报错了-->
</head>
<body>
<div id="app" class="container">
    <h1>通告管理客户端实现(Bootstrap/Vue.js/Axios)</h1>

    <div v-show="listNoticeDiv"><!--内容列表区-->
        <form id="queryForm" style="display: inline">
            <input type="text" name="title" id="titleId" placeholder="请输入标题">
            <input type="button" value="查询" @click="doQueryNotices">
        </form>
        <button @click="doShowOrHide">添加</button>
        <table class="table">
            <thead>
            <!--一般定义标题是在tr里面写th,定义列标题 -->
            <tr>
                <th>序号</th>
                <th>标题</th>
                <th>类型</th>
                <th>状态</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <!--vue的循环遍历方法，n是返回结果中的元素，i是下标-->
            <!--逻辑:当把返回结果赋值给notices时，它会觉察到notices值的变化，就会把每个元素循环遍历了-->
            <tr v-for="(n,i) in notices":key="i">
                <!--在tbody标签中使用td标签-->
                <td>{{i+1}}</td>
                <td>{{n.title}}</td>
                <td>{{n.type}}</td>
                <td>{{n.status}}</td>
                <td>{{n.createdTime}}</td>
                <td>
                    <button @click="doDeleteById(n.id)">delete</button>
                    <button @click="doFindById(n.id)">update</button>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="pagination">
            <button class="pre" @click="doJumpToPage">上一页</button>
            <!--凡是出现插值表达式的都要在data数据区定义-->
            <button class="percent">{{pageCurrent}}/{{pageCount}}</button>
            <button class="next" @click="doJumpToPage">下一页</button>
            <form style="display: inline" id="pageForm">
                <!--可以用v-model指令创建双向数据绑定,
                即:文本框中设置v-model="AB",在其它文本框中写{{AB}},那这两个文本框里的数据就是双向的一样的-->
                <!--如：<input type="text" v-model="pageCurrent" id="pageNumId">-->
                <input type="text" name="pageCurrent" id="pageNumId">
                <input type="button" value="跳转" class="jump" @click="doJumpToPage">
            </form>
        </div>
    </div>

    <div v-show="editNoticeDiv" style="display: none">
        <form id="noticeEditForm">
            <input type="hidden" id="id" v-model="id">
            <div class="form-group">
                <label for="typeId" >类型:</label>
                <!--select:选择框-->
                <select class="form-control" v-model="type" id="typeId">
                    <option value="1">通知</option>
                    <option value="2">公告</option>
                </select>
            </div>
            <div class="form-group">
                <label for="tId">标题:</label>
                <input type="text" v-model="title" class="form-control" id="tId" placeholder="title">
            </div>
            <div class="form-group">
                <label for="contentId">内容:</label>
                <textarea class="form-control" v-model="content" rows="3" id="contentId">
        </textarea>
            </div>
            <div class="form-group">
                <label>状态:</label>
                <label class="radio-inline">
                    <input type="radio" v-model="status" name="status" value="0" checked> 正常
                </label>
                <label class="radio-inline">
                    <input type="radio" v-model="status" name="status" value="1"> 关闭
                </label>
            </div>
            <button type="button" class="btn btn-default submit" @click="doSaveOrUpdate">Submit</button>
            <button type="button" class="btn btn-default cancel" @click="doCancel">Cancel</button>
        </form>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    var vm=new Vue({
//定义监控点，vue底层会基于此监控点在内存中构建dom树
        el:"#app",

        data:{//此对象中定义页面上要操作的数据
            notices:[],//是空的数组类型，后面赋值
            id:"",
            title:"",
            content:"",
            type:1,
            status:0,
            pageCurrent:1,//当前页码数，先默认定义一个数，后面再赋值修改(html的动态)
            pageCount:0, //总页码数
            listNoticeDiv:true,//默认值：和v-show="listNoticeDiv"搭配用，true--表示显示
            editNoticeDiv:false //默认值：false--表示隐藏
        },

        methods:{//此位置定义所有业务事件处理函数

            //点击添加按钮时，显示添加数据的文本框区，隐藏列表数据区
            doShowOrHide(){
                    //改变默认值
                this.listNoticeDiv=false;
                this.editNoticeDiv=true;
            },

            //隐藏添加数据的文本框区，显示列表数据区
            doCancel(){
                this.listNoticeDiv=true,
                    this.editNoticeDiv=false
            },

            doFindById(id){
                let url=`http://localhost/notice/${id}`;
                axios.get(url).then((response)=>{
                    let result=response.data;//jsonResult
                    if(result.state==1){
                        //修改vue对象中data (model)中的属性的值
                        this.doShowOrHide();//只显示修改区文本框
                        this.id=result.data.id;
                        this.title=result.data.title;
                        this.content=result.data.content;
                        this.type=result.data.type;
                        this.status=result.data.status;
                    }else{
                        alert(result.message);
                    }
                })
            },

            doSaveOrUpdate(){
                //1.定义url
                let url="http://localhost/notice/";
                //2.定义参数
                let params={"id":this.id,"title":this.title,"content":this.content, "type":this.type, "status":this.status}
                console.log("params",params);
                //3.发送异步请求
                axios({
                    method: this.id?"put":"post",
                    url: url,
                    data: params
                }).then((response)=>{
                    let result=response.data;
                    if(result.state==1){
                        alert(result.message);
                        this.doGetNotices();
                        this.resetForm();
                        this.doCancel();
                    }else{
                        alert(result.message);
                    }
                })
            },

            //添加完数据后，就清空文本框
            resetForm(){
                this.id="",
                    this.title="",
                    this.content="",
                    this.type=1,
                    this.status=0
            },

            doDeleteById(id){
                let url=`http://localhost/notice/${id}`
                axios.delete(url).then((response)=>{
                    let result=response.data;
                    if(result.state==1){
                        alert(result.message);
                        //获取当前页码有几条记录
                        //刷新页面(假如是最后一页，并且当前页码值大于1，当前页记录只有一条，则查询上一页数据)
                        //方法1,取tbody的子元素中有几条记录:let rows=document.querySelector("table>tbody").children.length;
                        let rows=document.querySelectorAll("table>tbody>tr").length;

                        if(this.pageCurrent>1&&this.pageCurrent==this.pageCount&&rows==1){
                            this.pageCurrent--;
                        }
                        this.doGetNotices();//删完再刷新
                    }else{
                        alert(result.message);
                    }
                    this.doGetNotices();//删完再刷新
                })
            },

            doQueryNotices(){
                //设置当前页码值
                this.pageCurrent=1;
                //执行查询操作
                this.doGetNotices();
            },

            doJumpToPage(event){
                //1.获取被点击对象的class属性值(event-表示被点击的事件对象)
                let cls=event.target.getAttribute("class");

                //2.基于属性值修改当前页码值
                if(cls=="pre"&&this.pageCurrent>1){
                    this.pageCurrent--;
                }else if(cls=="next"&&this.pageCurrent<this.pageCount){
                    this.pageCurrent++;
                }else if(cls=="jump"){
                    //基于选择器找到对象，相当于jquery的:$("#pageNumId")
                    let input=document.querySelector("#pageNumId");
                    //获取输入的页码值
                    let pageNum=input.value;
                    if(pageNum>this.pageCount||pageNum<1){
                        alert("页码值不正确");
                        return //不往下走了就 return
                    }
                    this.pageCurrent=pageNum;
                }else{
                    return;
                }

                //3.基于新的页码值重新执行查询
                this.doGetNotices();
            },

            doGetNotices(){
                //方法1.基于form表单的id获取第一个input([0])的输入值:
//let queryForm=document.querySelector("#queryForm");
//let title=queryForm.elements[0].value;
                //方法2.基于文本框的id获取输入值
                let title=document.querySelector("#titleId").value;

                //1.自己手动拼接url
                // let url=`http://localhost/notice/?pageCurrent=${this.pageCurrent}&title=${title}`;
//axios是通过promise实现对ajax技术的一种封装,比ajax语法更简洁，可以多种异步
//成功的话执行then，失败就执行catch

                //2.自动拼接url
                let url=`http://localhost/notice/`;
                axios.get(url,{
                    params:{
                        pageCurrent:this.pageCurrent,//this取data区
                        title:title
                    }
                }).then(function (response){
                    let jsonResult=response.data;
                    console.log(jsonResult);
                    //设置notice列表信息-->把返回的数据赋值给data中的notices,要用 this.vm
                    //注意:底层会把整个花括号里的数据存到vue中，所以不用通过data调用notices了
                    this.vm.notices=jsonResult.data.list;
                    //设置分页初始数据
                    this.vm.pageCurrent=jsonResult.data.pageNum;
                    this.vm.pageCount=jsonResult.data.pages;
                })
            }
        },

        mounted(){//vue中的一个生命周期函数，此函数在页面元素加载完成以后执行
            this.doGetNotices();
        }
    });
</script>
</body>
</html>